<template>
  <a-modal v-model:visible="innerVisible" title="新增网关类型" :width="588">
    <div>
      <div class="mx-auto flex flex-row items-center justify-between mb-7" style="width: 242px">
        <div class="text-xl font-semibold" :class="[stepCurrent === 0 ? 'text-color-active' : 'text-color-secondary']">
          基本信息
        </div>
        <div class="h-px bg-color-split" style="width: 48px"></div>
        <div class="text-xl font-semibold" :class="[stepCurrent === 1 ? 'text-color-active' : 'text-color-secondary']">
          点位属性
        </div>
      </div>
      <div v-show="stepCurrent === 0">
        <DynamicForm
          ref="gtForm"
          :force-column="true"
          :model="gtModel"
          :model-form-setting="gtFormSetting"
          @init="gtFormInit"
        />
      </div>
      <div v-show="stepCurrent === 1">
        <ManageAttr ref="manageAttrRef" />
      </div>
    </div>
    <template #footer>
      <a-button v-if="stepCurrent === 0" type="primary" @click="next">继续</a-button>
      <template v-else>
        <a-button @click="back">返回</a-button>
        <a-button type="primary" @click="ok(false)">确定</a-button>
        <a-button type="primary" @click="ok(true)">确定并继续新增</a-button>
      </template>
    </template>
  </a-modal>
</template>
<script setup lang="ts">
import { message } from "ant-design-vue";
import { onMounted, ref, watch } from "vue";
import { addGatewayType, updateAttr } from "/@/api/aiot/gateway";
import type { GatewayTypeItem, GatewayTypeAttrItem } from "/@/api/aiot/gateway/models";
import { DynamicFormExpose, FormItemComponentType, FormItemData } from "/@/components/CURDDialog/models";
import { PatternKey } from "/@/utils/verify";
import { useGatewayModel } from "./useGatewayModel";
import ManageAttr from "./ManageAttr.vue";

const props = defineProps<{
  visible: boolean;
  isEnterprise: boolean;
}>();
const mainKey = props.isEnterprise ? "gatewayTypeId" : "defaultGatewayTypeId";
const emits = defineEmits(["update:visible", "done"]);
const innerVisible = ref(props.visible);
watch(innerVisible, (v) => {
  emits("update:visible", v);
});
let firstShow = true;
watch(
  () => props.visible,
  (v) => {
    innerVisible.value = v;
    if (v) {
      if (firstShow) {
        firstShow = false;
      }
    } else {
      reset();
    }
  }
);
const stepCurrent = ref(0);
function reset() {
  stepCurrent.value = 0;
  gtForm.value?.resetFields();
  manageAttrRef.value.clear();
}
/**
 * base info
 */
const gtForm = ref<DynamicFormExpose>();
const { gtModel, gtFormSetting } = useGatewayModel(props.isEnterprise);

function gtFormInit() {
  if (gtForm.value) {
    gtForm.value.initFormItemComponentData();
  }
}

function next() {
  if (gtForm.value) {
    gtForm.value.validate().then(() => {
      stepCurrent.value = 1;
    });
  }
}

function back() {
  stepCurrent.value = 0;
}
/**
 * dynamic attrs
 */
const manageAttrRef = ref<any>();
async function ok(isContinue) {
  const attrData = manageAttrRef.value.getData(true);
  if (!attrData) return;
  let points: Partial<GatewayTypeAttrItem>[] = [
    {
      datapointAttrName: "点位名称",
      requires: true,
    },
  ];
  points = points.concat(attrData);
  const newGatewayType = await addGatewayType(!props.isEnterprise, gtModel.value);
  if (newGatewayType) {
    points.forEach((el, i) => {
      el.gatewayTypeId = newGatewayType[mainKey];
      el.datapointAttrNumber = i;
    });
    const re = await updateAttr(!props.isEnterprise, points);
    if (re) {
      message.success("操作成功");
      if (isContinue) {
        reset();
      } else {
        innerVisible.value = false;
      }
      emits("done");
    }
  }
}
</script>
